<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08-axios的默认配置</title>
    <!-- 这样即可引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>

    <script>
        let btns = document.querySelectorAll('button');

        /*
            如果未来我们的开发中，遇到后端有多个不同的地址前缀或者不同的需求
            比如某些内容是一个后端与我们配合，别的内容又是另外一个后端与我们配合
            那么他们的服务器地址很有可能是不同的，那么我们上节说的axios.defaults的配置方式很明显就不太适用于这个场景了            
            这个时候我们可以通过axios的create方法创建一个axios实例，不同的实例对应不同的后端场景，这样就更加灵活了。
        */
        // 创建出来的实例其实和axios几乎是相同的，axios怎么使用，实例就怎么使用。
        const demo = axios.create({
            baseURL: 'http://localhost:10086',
            timeout: 3000,
        });

        const demo2 = axios.create({
            baseURL: 'http://localhost:10088',
            timeout: 2000,
        });

        btns[0].onclick = () => {
            // 记住上面的话，创建出来的实例用法和原生axios一模一样
            demo.get('/demo/demoGet').then(res => console.log(res)).catch(err => console.error(err))
        };

        btns[1].onclick = () => {
            demo.post('/demo/demoPost', {
                    name: '123'
                })
                .then(res => {
                    console.log(res)
                })
                .catch(err => {
                    console.error(err);
                })
        };
    </script>
</body>

</html>